<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />   
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
        <script type="text/javascript">
            var pcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
            
            Ext.onReady(function(){
                Ext.QuickTips.init();
                
                Ext.form.Field.prototype.msgTarget = 'side';
                
                var idValue = getPrarmeterValue(window.location, 'id');
                var startPage = getPrarmeterValue(window.location, 'startPage');
                
                var idValue = getPrarmeterValue(window.location, 'id');
                var startPage = getPrarmeterValue(window.location, 'startPage');
                
                var pantoneColorForm = new Ext.FormPanel({
                    labelAlign: 'left',
                    url: '../../servlet/BiPantoneColorServlet?action=1',
                    frame: true,
                    title: pcMessage.get('ui.pantonecolor.edittitle'),
                    bodyStyle: 'padding:5px 5px 5px 5px;margin-top: 2px;',
                    width: '100%',
                    labelWidth: 105,
                    reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    }, {
                        name: 'number',
                        mapping: 'number'
                    }, {
                        name: 'realColor',
                        mapping: 'realColor'
                    }]),
                    items: [{
                        id: 'id',
                        name: 'id',
                        xtype: 'hidden'
                    }, {
                        fieldLabel: pcMessage.get('ui.pantonecolor.number'),
						id: 'number',
                        name: 'number',
                        allowBlank: false,
                        xtype: 'textfield',
                        blankText: message.get('message.edit.noblank'),
                        maxLength: 128,
                        width: '90%',
                        maxLengthText: message.get('message.edit.toolong'),
						listeners:{
							'render': {fn:function(){
						    	Ext.getCmp('number').getEl().on('keyup', function(){
						    		document.getElementById('sampleNumber').innerHTML = Ext.getCmp('number').getValue();;
						    	}, this, {buffer:500});
                    		}, scope:this}
						}
                    }, {
                        fieldLabel: pcMessage.get('ui.pantonecolor.realcolor'),
						id: 'realColor',
                        name: 'realColor',
                        allowBlank: false,
                        xtype: 'textfield',
                        blankText: message.get('message.edit.noblank'),
                        maxLength: 6,
                        width: '90%',
                        maxLengthText: message.get('message.edit.toolong'),
						listeners:{
							'render': {fn:function(){
						    	Ext.getCmp('realColor').getEl().on('keyup', function(){
									var color = Ext.getCmp('realColor').getValue();
									while(color.length < 6){
										color = color + '0';
									}
						    		document.getElementById('sampleTable').style['backgroundColor'] = '#' + color;
						    	}, this, {buffer:500});
                    		}, scope:this}
						}
                    },{
						html: '<table><tr><td width="105">' +
								pcMessage.get('ui.pantonecolor.sample')	+
							'</td><td><table id="sampleTable" width="160"><tr height="160"><td><center><font id="sampleNumber" size="4"></font><center></td></tr></table></td></tr></table>'
					}],
                    
                    buttons: [{
                        text: message.get('message.edit.save'),
                        handler: function(){
                            if (pantoneColorForm.getForm().isValid()) {
                            
                                pantoneColorForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
                                        pantoneColorForm.getForm().reset();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
                    }, {
                        text: message.get('message.edit.reset'),
                        handler: function(){
                            pantoneColorForm.getForm().reset();
                        }
                    }, {
                        text: message.get('message.edit.cancel'),
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'pantone_color_list.html?startPage=' + startPage;
                            }
                            else {
                                window.location = 'pantone_color_list.html';
                            }
                        }
                    }]
                })
                
                pantoneColorForm.render('pantoneColorDiv');
                
                if (idValue != null) {
                    document.getElementById('id').value = idValue;
                    pantoneColorForm.getForm().load({
                        url: '../../servlet/BiPantoneColorServlet?action=3&id=' + idValue,
                        waitMsg: Ext.LoadMask.prototype.msg,
                        success: function(form, action){
                            document.getElementById('sampleTable').style['backgroundColor'] = '#' + document.getElementById('realColor').value;
							document.getElementById('sampleNumber').innerHTML = document.getElementById('number').value;
                        }
                    });
                }
                
            });
        </script>
    </head>
    <body>
        <div id="pantoneColorDiv">
        </div>
    </body>
</html>
